<template>
    <div id="firstPageIndex">
        <div class="firstPage-content">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="公文管理" name="first" class="firstPage-content-dropdown-document">
                    <el-table :data="tableData_document" border 
                        :header-cell-style="{'text-align':'center'}"
                        :cell-style="{'text-align':'center'}"
                        :row-style="{height:0+'px'}"
                        >
                        <!-- :show-header="false" -->
                        <el-table-column prop="notice" label="公告标题" width="550"></el-table-column>
                        <el-table-column prop="publisher" label="发布者" width="150"></el-table-column>
                        <el-table-column prop="noticeTime" label="发布时间" width="258"></el-table-column>
                    </el-table>
                </el-tab-pane>

                <el-tab-pane label="电子邮件" name="second" class="firstPage-content-dropdown-email">
                    <el-table :data="tableData_email" border 
                        :header-cell-style="{'text-align':'center'}"
                        :cell-style="{'text-align':'center'}"
                        :row-style="{height:0+'px'}"
                        >
                        <!-- :show-header="false" -->
                        <el-table-column prop="notice" label="邮件标题" width="550"></el-table-column>
                        <el-table-column prop="publisher" label="发送人" width="150"></el-table-column>
                        <el-table-column prop="noticeTime" label="发送时间" width="258"></el-table-column>
                    </el-table>
                </el-tab-pane>

                <el-tab-pane label="督办事件" name="third" class="firstPage-content-dropdown-supervise">
                    <el-table :data="tableData_email" border 
                        :header-cell-style="{'text-align':'center'}"
                        :cell-style="{'text-align':'center'}"
                        :row-style="{height:0+'px'}"
                        >
                        <!-- :show-header="false" -->
                        <el-table-column prop="notice" label="督办事件" width="650"></el-table-column>
                        <el-table-column prop="noticeTime" label="发布时间" width="308"></el-table-column>
                    </el-table>
                </el-tab-pane>

                <el-tab-pane label="政策规章" name="fourth" class="firstPage-content-dropdown-rule">
                    <el-table :data="tableData_email" border 
                        :header-cell-style="{'text-align':'center'}"
                        :cell-style="{'text-align':'center'}"
                        :row-style="{height:0+'px'}"
                        >
                        <!-- :show-header="false" -->
                        <el-table-column prop="notice" label="规章标题" width="550"></el-table-column>
                        <el-table-column prop="publisher" label="发布部门" width="150"></el-table-column>
                        <el-table-column prop="noticeTime" label="发布时间" width="258"></el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </div>

        <div class="activity">
            <div class="activity-1">
                <p class="activity-1-pic"></p>
                <p class="activity-1-text">解锁圣诞国家,享千元豪礼</p>
            </div>
            <div class="activity-2">
                <p class="activity-2-pic"></p>
                <p class="activity-2-text">天天享福利,手机银行用户专享</p>
            </div>
            <div class="activity-3">
                <p class="activity-3-pic"></p>
                <p class="activity-3-text">福利大转盘,转来美物</p>
            </div>
        </div>

        <div id="pieChart"></div>
        <div id="lineChart"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts'

export default({
    name:"FirstPageIndex",
    data(){
        return{
            activeName: 'first',
            tableData_document:[],
            tableData_email:[],
            tableData_supervise:[],
            tableData_rule:[],

            echartsOption: {    // echarts选项，所有绘图数据和样式都在这里设置
                legend: {   //图表上方的图例
                    data: ['普通会员', '白银会员', '黄金会员', '钻石会员']
                },
                tooltip: {   //鼠标放到图上的数据展示样式
                    trigger: 'axis'
                },
                series: [{
                    name: '公司客户占比',
                    type: 'pie',
                    barWidth: '60%',
                    data: [   // 扇形图数据格式： {value, name}
                        {value: 0.45, name: '普通会员'},      // value不一定是比例，echarts会自动转换
                        {value: 0.3, name: '白银会员'},
                        {value: 0.2, name: '黄金会员'},
                        {value: 0.05, name: '钻石会员'},
                    ],
                }],
            },

            echartsOption2: {    // echarts选项，所有绘图数据和样式都在这里设置
                legend: {   //图表上方的图例
                    data: ['普通会员', '白银会员', '黄金会员', '钻石会员']
                },
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],   // x轴数据
                    name: '日期',   // x轴名称
                    nameTextStyle: {    // x轴名称样式
                        fontWeight: 600,
                        fontSize: 18
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '数量',   // y轴名称
                    nameTextStyle: {    // y轴名称样式
                        fontWeight: 600,
                        fontSize: 18
                    }
                },
                tooltip: {   //鼠标放到图上的数据展示样式
                    trigger: 'axis'
                },
                series: [   //每条折线的数据系列
                    {
                        name: '普通会员',
                        data: [820, 932, 901, 934, 1290, 1330, 1320],
                        type: 'line'
                    },
                    {
                        name: '白银会员',
                        data: [620, 711, 823, 934, 1445, 1456, 1178],
                        type: 'line'
                    },
                    {
                        name: '黄金会员',
                        data: [612, 920, 1140, 1160, 1190, 1234, 1321],
                        type: 'line'
                    },
                    {
                        name: '钻石会员',
                        data: [234, 320, 453, 567, 789, 999, 1200],
                        type: 'line'
                    }
                ],
            }
        }
    },
    methods:{
        handleClick(tab, event) {
            console.log(tab, event);
        },
    },

    mounted(){
        let pieChart = echarts.init(document.getElementById('pieChart'), 'light') // 初始化echarts, theme为light
        pieChart.setOption(this.echartsOption)   // echarts设置选项

        let lineChart = echarts.init(document.getElementById('lineChart'), 'light') // 初始化echarts, theme为light
        lineChart.setOption(this.echartsOption2)   // echarts设置选项
    }
})
</script>


<style scoped>
*{
    margin: 0px;
    padding: 0px;
}
.firstPage-content{
    width: 1000px;
    height: 410px;
    background-color: white;
    position: relative;
    top: 10px;
    left: 10px;
    border-radius: 10px;
}

.firstPage-content-dropdown-document{
    width: 960px;
    height: 340px;
    margin-left: 20px;
    margin-top: 0px;
    background-color: rgb(248, 248, 247);
}
.firstPage-content-dropdown-email{
    width: 960px;
    height: 340px;
    margin-left: 20px;
    margin-top: 0px;
    background-color: rgb(248, 248, 247);
}
.firstPage-content-dropdown-supervise{
    width: 960px;
    height: 340px;
    margin-left: 20px;
    margin-top: 0px;
    background-color: rgb(248, 248, 247);
}
.firstPage-content-dropdown-rule{
    width: 960px;
    height: 340px;
    margin-left: 20px;
    margin-top: 0px;
    background-color: rgb(248, 248, 247);
}

.activity{
    position: absolute;
    width: 195px;
    height: 410px;
    border: 2px solid white;
    border-radius: 10px;
    background-color: rgb(255, 255, 255);
    top: 10px;
    left: 1015px;
}
.activity-1{
    width: 190px;
    height: 120px;
    margin-top: 15px;
    border-radius: 10px;
}
.activity-1-pic{
    width: 190px;
    height: 100px;
    background-image: url("/src/assets/firstPage-activity/activity-1.png");
    background-repeat: no-repeat;
    background-size: cover;
}
.activity-1-text{
    text-align: center;
    font-family: "宋体";
    font-size: 12px;
}
.activity-1-text:hover{
    color: tomato;
}

.activity-2{
    width: 190px;
    height: 120px;
    border-radius: 10px;
    margin-top: 5px;
}
.activity-2-pic{
    width: 190px;
    height: 100px;
    background-image: url("/src/assets/firstPage-activity/activity-2.png");
    background-repeat: no-repeat;
    background-size: cover;
}
.activity-2-text{
    text-align: center;
    font-family: "宋体";
    font-size: 12px;
}
.activity-2-text:hover{
    color: tomato;
}

.activity-3{
    width: 190px;
    height: 120px;
    border-radius: 10px;
    margin-top: 5px;
}
.activity-3-pic{
    width: 190px;
    height: 100px;
    background-image: url("/src/assets/firstPage-activity/activity-3.png");
    background-repeat: no-repeat;
    background-size: cover;
}
.activity-3-text{
    text-align: center;
    font-family: "宋体";
    font-size: 12px;
}
.activity-3-text:hover{
    color: tomato;
}

#pieChart{
    width: 500px;
    height: 400px;
    position: relative;
    top: 30px;
}
#lineChart{
    width: 700px;
    height: 400px;
    position: relative;
    top: -370px;
    left: 500px;
}
</style>